<template>
  <div class="leftNavibar">
    <div class="videoinfo">
      <h2>视频信息</h2>
      <el-table :data="videoData" style="width: 100%">
        <el-table-column prop="number" label="编号" width="100" />
        <el-table-column prop="statu" label="状态" width="100" />
        <el-table-column prop="address" label="地点" />
      </el-table>
    </div>
    <div class="raininfo">
      <h2>雨量计信息</h2>
      <el-table :data="rainData" style="width: 100%">
        <el-table-column prop="number" label="编号" width="100" />
        <el-table-column prop="rainnumber" label="累计降雨量" width="100" />
        <el-table-column prop="continuetime" label="降雨持续时间" />
        <el-table-column prop="time" label="降雨时间" />
      </el-table>
    </div>
  </div>
  <div class="rightNavibar">
    <div class="waterquntityinfo">
        <h2>水质信息</h2>
        <el-table :data="waterqData" style="width: 100%">
            <el-table-column prop="address" label="位置" width="100" />
            <el-table-column prop="ph" label="ph值" width="100" />
            <el-table-column prop="point" label="点导率" />
            <el-table-column prop="yd" label="硬度" />
        </el-table>
    </div>
    <div class="waterinfo">
        <h2>水位信息</h2>
        <el-table :data="waterhData" style="width: 100%">
            <el-table-column prop="address" label="位置" width="100" />
            <el-table-column prop="elevation" label="高程" width="100" />
            <el-table-column prop="waterchange" label="水位变化率" />
            <el-table-column prop="avgwater" label="平均水位" />
        </el-table>
    </div>
  </div>
</template>

<script setup>
let videoData = [
  {
    number: 1,
    statu: "在线",
    address: "XXX",
  },
];
</script>

<style scoped>
.videoinfo,
.raininfo,
.waterquntityinfo,
.waterinfo {
  width: 100%;
  height: 46%;
  margin-top: 10%;
}

.leftNavibar {
  position: fixed;
  height: 80%;
  width: 300px;
  background-color:aliceblue;
  left: 20px;
  z-index: 99;
  bottom: 25px;
}

.rightNavibar {
  position: fixed;
  height: 80%;
  width: 300px;
  background-color:aliceblue;
  z-index: 99;
  right: 20px;
  bottom: 25px;
}
</style>
